<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>待办详情</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link href="../css/common.css" rel="stylesheet" />
		<link href="../css/iconfont.css" rel="stylesheet" />
    <style>
      .mui-radio input[type=radio]:before{
        font-size: 20px;
      }
      .mui-checkbox.mui-left input[type=checkbox], .mui-radio.mui-left input[type=radio]{
        left: 0px;
        top: 6px;
      }
      .mui-checkbox.mui-left label, .mui-radio.mui-left label{
        padding-left: 22px;
      }
      .fixed-title{
        width: 100%;
        background: #CFD8DE;
        padding: 6px 0;
        display: flex;
      }
      .fixed-title span{
        display: inline-block;
        width: 28%;
        padding: 4px;
        font-size: 0.88rem;
        text-align: center;
        box-sizing: border-box;
      }
      .fixed-title span:first-child{
        width: 15%;
      }
      .fixed-title span:last-child{
        width: 35%;
      }
      .list{
        display: flex;
        position: relative;
        padding: 5px 0;
      }
      .list::after{
       position: absolute;
       content: '';
       height: 1px;
       background-color: #EEEEEE;
       bottom: 0;
       left: 15px;
       right: 15px;
      }
      .list>div{
        width: 25%;
        padding: 6px;
        font-size: 16px;
        text-align: center;
        box-sizing: border-box;
        font-size: 14px;
      }
      .list>div:first-child{
        width: 15%;
      }
      .list>div:last-child{
        width: 35%;
      }
    </style>
	</head>

	<body>
    <div class="container" id="container">
      <header class="mui-bar mui-bar-nav">
          <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
          <h1 class="mui-title">待办详情</h1>
          <!-- <a class="mui-pull-right iconfont icon-bianji mui-right-icon"> 操作</a> -->
      </header>
      <div class="mui-content bg-white">
        <div class="content-Title">
          <span class="titleB">基本信息</span>
        </div>
        <div class="content">
          <div class="item flex">
            <div class="text-grey">事务ID:</div>
            <div class="text-black">{{detail.id}}</div>
          </div>
          <div class="item flex">
            <div class="text-grey">申请人(触发人):</div>
            <div class="text-black flex-sub">{{detail.createUserName}}</div>
          </div>
          <div class="item flex">
            <div class="text-grey">所属区域:</div>
            <div class="text-black flex-sub">{{detail.id}}</div>
          </div>
          <div class="item flex">
            <div class="text-grey">发起时间:</div>
            <div class="text-black flex-sub">{{time(detail.createDate)}}</div>
          </div>
          <br>
          <div class="item flex">
            <div class="flex-sub text-grey">当前状态: <span class="text-orange">{{renderStatus(detail.status)}}</span></div>
            <div class="flex-sub text-grey">审批结果: <span class="text-orange">{{resultStatus(detail.approveStatus)}}</span></div>
          </div>
        </div>
        <div class="content-Title">
          <span class="titleB">事务信息</span>
        </div>
        <div class="content">
          <div class="item flex">
            <div class="text-grey">操作类型:</div>
            <div class="text-black">{{detail.typeName}}</div>
          </div>
          <div class="item flex">
            <div class="text-grey">操作目标ID:</div>
            <div class="text-black">{{detail.targetId}}</div>
          </div>
          <div class="item flex">
            <div class="text-grey">操作目标名称:</div>
            <div class="text-black">{{detail.targetName}}</div>
          </div>
          <div class="item flex">
            <div class="text-grey">操作目标所属分类:</div>
            <div class="text-black">{{detail.id}}</div>
          </div>
          <div class="item flex">
            <div class="text-grey">操作描述:</div>
            <div class="text-black">{{detail.id}}</div>
          </div>
        </div>
        <div class="content-Title">
          <span class="titleB">流程记录</span>
        </div>
        <div class="record content">
          <div class="fixed-title">
            <span>ID</span>
            <span>时间</span>
            <span>操作人</span>
            <span>操作记录</span>
          </div>
          <div class="list align-center" v-for="item in list">
            <div>{{item.id}}</div>
            <div>{{time(item.createDate)}}</div>
            <div>{{item.createUserName}}</div>
            <div>
              <div class="text-green" v-if="item.status==0">新建</div>
              <div v-if="item.status==1">
                <div class="text-green">已通过</div><div>审批意见：{{item.remark}}</div>
              </div>
              <div v-if="item.status==2">
                <div class="text-red" v-if="item.status==2">已驳回</div><div>审批意见为：{{item.remark}}</div>
              </div>
              </div>  
          </div>
        </div>
      </div>
      <div class="popUp mui-popover mui-popover-add" id="popUp">
        <form action=""class="popUpContent">
          <div class="item flex align-center">
            <div class="label">审批：</div>
            <div class="flex">
              <div class="mui-input-row mui-radio mui-left">
                <label>通过</label>
                <input name="radio1" type="radio" value="1" v-model="form.status">
              </div>
              <div class="mui-input-row mui-radio mui-left">
                <label>驳回</label>
                <input name="radio1" type="radio" value="0" v-model="form.status">
              </div>
            </div>
          </div>
          <div class="item flex">
            <div class="label">意见：</div>
            <div class="flex-sub ">
              <textarea id="textarea" rows="3" placeholder="请输入审批意见" v-model="form.remark"></textarea>
            </div>
          </div>
          <div class="item flex">
            <div class="label"></div>
            <div class="flex-sub flex">
             <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined flex-sub" @click="cancle()">取消</button>
             <button type="button" class="mui-btn mui-btn-primary flex-sub" @click="submit()">确认</button>
            </div>
          </div>
        </form>
      </div>
    </div>
		<script src="../../../js/mui.min.js"></script>
		<script src="../../../js/vue.js"></script>
		<script src="../../../js/jquery-1.7.2.min.js"></script>
		<script src="../js/mkeyplus.base.js"></script>
		<script type="text/javascript">
			mui.init()
      var mask = null;
      var detailVm = null;
      var cv = null; // 当前webview
      var pageId = ""; //获取详情id
      mui.plusReady(function() {
        cv = plus.webview.currentWebview();
        pageId = cv.pageId || '';
        console.log(pageId)
        detailVm.getDetail(pageId);
        detailVm.getRecord(pageId);
      })
      detailVm = new Vue({
        el: "#container",
        data: {
          detail: {},
          form: {
            taskId:'',
            status:'',
            remark:''
          },
          list: []
        },
        created: function() {},
        methods: {
          record: function() {
            mui.openWindow({
              url: '../waitList/record.html',
              id: '../waitList/record.html',
              extras: {
                pageId: pageId
              }
            })
          },
          getRecord: function(pageId) {
            // plus.nativeUI.showWaiting('加载中...');
            var that = this
            mui.baseApp.httpRequst("/api/taskRecord/queryAll/" + pageId, {}, function(data) {
              plus.nativeUI.closeWaiting();
              that.list = data
            }, function() {
              plus.nativeUI.closeWaiting();
              console.log("获取数据失败");
            })
          },
          getDetail: function(pageId) {
            plus.nativeUI.showWaiting('加载中...');
            var that = this
            mui.baseApp.httpRequst("/api/task/" + pageId, {}, function(data) {
              plus.nativeUI.closeWaiting();
              console.log('待办详情'+ JSON.stringify(data))
              that.detail = data
            }, function() {
              plus.nativeUI.closeWaiting();
              console.log("获取数据失败");
            })
          },
          renderStatus(status) {
            status=Number(status)
            switch (status) {
              case 1:
                return "办理中";
              case 2:
                return "已驳回";
              case 3:
                return "已通过";
              case 4:
                return "已完成";
            }
          },
          resultStatus(status) {
            switch (status) {
              case 0:
                return "已驳回";
              case 1:
                return "已通过";
              default:
                return "";
            }
          },
          time(time) {
            var date = new Date(time);
            var year = date.getFullYear();
            var mon = date.getMonth() + 1;
            var day = date.getDate();
            var hours = date.getHours();
            var minu = date.getMinutes();
            var sec = date.getSeconds();
            return year + '-' + mon + '-' + day + ' ' + hours + ':' + minu + ':' + sec;
          },
          approve(){
           mui('#popUp').popover('show');
          },
          cancle(){ 
            mui('#popUp').popover('toggle');
          },
        },
        
      
      })
		</script>
	</body>

</html>
